<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>新闻</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="shortcut icon" href="style/images/favicon.ico">
<link href="style/bootstrap.css" rel="stylesheet">
<link href="style/bootstrap-theme.css" rel="stylesheet">
<script src="style/bootstrap.js"></script>
<link href="style/new.css" rel="stylesheet">
<script src="style/jquery-2.1.1.js"></script>
<script src="style/own.js"></script>
<script type="text/javascript" src="manage/themes/stickUp.min.js"></script>
<script type="text/javascript">
//轮播js
	var t = n = 0, count;
	$(document).ready(function(){	
		count=$("#banner_list a").length;
		$("#banner_list a:not(:first-child)").hide();
		$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
		$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
		$("#banner li").click(function() {
			var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
			n = i;
			if (i >= count) return;
			$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
			$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
			$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
			document.getElementById("banner").style.background="";
			$(this).toggleClass("on");
			$(this).siblings().removeAttr("class");
		});
		t = setInterval("showAuto()", 2000);
		$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
	})
	
	function showAuto()
	{
		n = n >=(count - 1) ? 0 : ++n;
		$("#banner li").eq(n).trigger('click');
	}
</script>
	<style type="text/css">
	.sheader{font-size: 18px;font-weight: bold;}
		#banner {position:relative; width:580px; height:315px; border:1px solid #666; overflow:hidden;}
		#banner_list img {border:0px;}
		#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer;font-size: 18px;font-weight: 550;}
		#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
		#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
					margin:0; padding:0; bottom:3px; right:5px;}
		#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;cursor:pointer}
		#banner ul li.on { background:#900}
		#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
</head>

<body>
	<br>
	<br>
	<br>
	<!-- header -->
		<c:import url="head.jsp"></c:import>
		<!-- header -->
	<br>
	<br>
		<!-- 正文内容 -->
	<div style="width:1000px;border:1px solid #E5E5E5">
		<!-- 第一部分left -->
		<div style="width: 390px;float: left;border: 0px;">
		<ul class="list-group">
			<c:forEach items="${newbean}" var="nbean" varStatus="status">
						<c:if test="${status.index<10}">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
		</ul>
		</div>
		
		<!-- 轮播区 -->

			<div id="banner">	
				<div id="banner_info"></div> <!--标题-->
			    <ul>
					        <li class="on">1</li><li>2</li><li>3</li><li>4</li>
							<li>5</li><li>6</li><li>7</li><li>8</li>
			    </ul>
			   <div id="banner_list">
					        	<c:forEach items="${circlebean }" var="cbean" varStatus="status">
									<a href="${cbean.detail}" target="_blank"><img src="${cbean.imageUrl}" title="${cbean.title}" alt="${cbean.title}" /></a>											
								</c:forEach> 
				</div>
			</div>
		
		<!-- 轮播区下方 -->
		<div style="width: 580px;height:55px;float: right;text-align: center;">
			<br>
			slide area
		</div>
		
		
		<!-- 第二部分 -->
		<div style="height:450px;width:1000px;border:1px solid #E5E5E5;float: left;">
			<!-- 第二部分left -->
			<div style="height:400px;width:500px;border:1px solid #E5E5E5;float: left;">
				<span class="sheader">●国内热点</span>
				<c:forEach items="${top1}" var="nbean" varStatus="status">
						<c:if test="${status.index<10 }">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
			<!-- 第二部分right -->
			<div style="height:400px;width:470px;border:1px solid #E5E5E5;float: right;">
				<span class="sheader">●国外新闻</span>
				<c:forEach items="${top2}" var="nbean" varStatus="status">
						<c:if test="${status.index<10 }">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
		</div>
		
		<!-- 第3部分 -->
		<div style="height:450px;width:1000px;border:1px solid #E5E5E5;float: left;">
			<!-- 第3部分left -->
			<div style="height:400px;width:500px;border:1px solid #E5E5E5;float: left;">
				<span class="sheader">●经济新闻</span>
				<c:forEach items="${top3}" var="nbean" varStatus="status">
						<c:if test="${status.index<10}">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
			<!-- 第3部分right -->
			<div style="height:400px;width:470px;border:1px solid #E5E5E5;float: right;">
			<span class="sheader">●军情播报</span>
				<c:forEach items="${top4}" var="nbean" varStatus="status">
						<c:if test="${status.index<10}">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
		</div>
		
		<!-- 第4部分 -->
		<div style="height:450px;width:1000px;border:1px solid #E5E5E5;float: left;">
			<!-- 第4部分left -->
			<div style="height:400px;width:500px;border:1px solid #E5E5E5;float: left;">
				<span class="sheader">●社会新闻</span>
				<c:forEach items="${top7}" var="nbean" varStatus="status">
						<c:if test="${status.index<10}">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
			<!-- 第4部分right -->
			<div style="height:400px;width:470px;border:1px solid #E5E5E5;float: right;">
			<span class="sheader">●科技之光</span>
				<c:forEach items="${top6}" var="nbean" varStatus="status">
						<c:if test="${status.index<10}">
						<li class="list-group-item"><a target="_blank"href="<%= path%>/new-detail/${nbean.id }">${nbean.title }</a></li>
						</c:if>
			</c:forEach>
			</div>
		</div>
		
		
		</div>
		
	<div id="fixedLayer">
		<a href="javascript:scroll(0,0)">
		<img alt=""
			src="style/images/top.png" style="width: 50px; height: 40px"></a>
	</div>


</body>
</html>

